{% extends base %}

{% block head %}
<style type="text/css">
label {
    float: left;
    width: 80px;
    display: block;
}
.label-rest {
    float: left;
    width: calc(100% - 80px);
}

</style>
{% end %}

{% block body %}

{% init type = "md" %}
{% init heading = T("创建笔记") %}
<div class="card">
    {% include note/component/create_note_header.html %}

    <form method="POST" action="">
        <div class="input-group-row">
            <label>{{T("标题")}}</label> 
            <input type="text" class="mid-text" name="name" value="{{name}}"/>
        </div>

        <!-- 选择日期 -->
        <div class="input-group-row">
            <label>日期</label>
            <input name="date" id="selectDate" autocomplete="off" class="create-input"/>
        </div>
        
        
        {% if type != "group" %}
            <div class="input-group-row">
                <label>{{T("类型")}}</label>
                <select name="type" value="{{type}}">
                    {% for item in NOTE_TYPE_LIST %}
                        <option value="{{item.type}}">{{T(item.name)}}</option>
                    {% end %}
                </select>
            </div>

            <div class="input-group-row">
                <label>{{T("笔记本")}}</label>
                <select name="parent_id" value="{{parent_id}}">
                    {%for item in groups %}
                        <option value="{{item.id}}">{{item.name}}</option>
                    {% end %}
                </select>
            </div>
        {% end %}

        <div class="row top-offset-1">
            <label>&nbsp;</label>
            <button class="mid-text">{{T("创建")}}</button>
        </div>
    </form>
</div>

<script type="text/javascript" src="/static/lib/layDate-v5.0.9/laydate.js"></script>
<script type="text/javascript">
    function getWeekDayFromLayDate(layDate) {
        var date = new Date(layDate.year, layDate.month-1, layDate.date);
        var wday = date.getDay();
        switch (wday) {
            case 0: return "周日";
            case 1: return "周一";
            case 2: return "周二";
            case 3: return "周三";
            case 4: return "周四";
            case 5: return "周五";
            case 6: return "周六";
        }
    }

    laydate.render({
        elem: '#selectDate',
        value: new Date(),
        format: "yyyy.MM.dd",
        done: function(value, date, endDate) {
            //得到日期生成的值，如：2017-08-18
            console.log(value); 
            //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(date); 
            //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            console.log(endDate); 

            $("input[name=name]").val(value + getWeekDayFromLayDate(date));
        }
    });
</script>

{% end %}

{% block aside %}
    {% include note/component/mod_aside.html %}
{% end %}
